import React, { useState, useEffect ,useRef ,memo} from 'react'
import http from '../../axios/http'
import Swiper from 'swiper'
import "swiper/css/swiper.min.css"
import Recommend from './Recommend'
import Search from './search'

const MemoRecommend = memo(Recommend);
const MemoSearch = memo(Search);

function Index(){
    const [banner,setBanner] = useState([])
    const couterRef = useRef(); // 用来获取dom元素 和 保存变量

    useEffect(() => {
        http.get({
            url:'/netease/banner',
            success: res=>{
                setBanner(res.data)
            }
        })
        new Swiper (couterRef.current, {
                    observer:true,
                    direction: 'horizontal', // 垂直切换选项
                    loop: true, // 循环模式选项
                    observeParents:true,
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                      },
                })
        return ()=>{
            // 退出的时候执行
            console.log('退出');
        }
    },[])

    return (
        <div className="Index">
            <header className="netease-header">
                <div className="swiper-container" ref={couterRef}>
                        <div className="swiper-wrapper">
                            {
                                banner.map((item,index)=>{
                                    return (
                                        <div className="swiper-slide swipe-slides" key={item.targetId + index} >
                                            <img src={item.picUrl} alt="banner" />
                                        </div>
                                    )
                                })
                            }
                        </div>
                    {/* <!-- 如果需要导航按钮 --> */}
                    <div className="swiper-button-prev"></div>
                    <div className="swiper-button-next"></div>
                </div>
                <MemoRecommend />
            </header>
            
        </div>
    )
}

export default Index;